<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $this->title;?></title>
<link rel="stylesheet" href="<?php echo $this->baseUrl;?>/files/admin/css/main.css" />
<script language="javascript" src="<?php echo $this->baseUrl;?>/files/admin/js/jquery.js"></script>
<script language="javascript" src="<?php echo $this->baseUrl;?>/files/admin/js/load.js"></script>
<!--时间选择器-->
<script language="javascript" src="<?php echo $this->baseUrl;?>/files/admin/js/date/calendar.js"></script>
<script language="javascript" src="<?php echo $this->baseUrl;?>/files/admin/js/date/lang/cn_utf8.js"></script>
<script language="javascript" src="<?php echo $this->baseUrl;?>/files/admin/js/date/calendar-setup.js"></script>
<link rel="stylesheet" href="<?php echo $this->baseUrl;?>/files/admin/js/date/calendar-blue.css" />
<!--colorbox-->
<script language="javascript" src="<?php echo $this->baseUrl;?>/files/admin/js/colorbox.jquery/jquery.colorbox.js"></script>
<link href="<?php echo $this->baseUrl;?>/files/admin/js/colorbox.jquery/colorbox2.css" rel="stylesheet" type="text/css"/>


<!--bi-->
<link rel="stylesheet" href="<?php echo $this->baseUrl;?>/files/admin/css/bi.css" />
<script language="javascript" src="<?php echo $this->baseUrl;?>/files/admin/js/bi.js"></script>

</head>
<body style="overflow:auto;">
<div id="main" style="clear:both;">
		<div class="bi-body">
			<form id="searchForm" name="searchForm" method="post" action="<?php echo $this->projectUrl(array('action'=>'visitlength'));?>" >
			<div class="bi-search  bi-search-2">
				<div class="bi-s-top"></div>
				<div class="bi-s-center">
					<div class="bi-s-c-con">
						<div class="bi-s-c-sel">
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
							  <tr>
							  	<td colspan="5">
									<!-- 时间选择条 -->
									<div id="timeRange">
										<a onclick="selData('<?php echo $this->projectUrl(array('action'=>'visitlength')) ;?>',1,<?php echo $this->vars['doType'];?>);" class="<?php echo $this->vars['dateType']==1 ? 'currentTimeRange' : ''?>">昨天</a> <a onclick="selData('<?php echo $this->projectUrl(array('action'=>'visitlength')) ;?>',2,<?php echo $this->vars['doType'];?>);" class="<?php echo $this->vars['dateType']==2 ? 'currentTimeRange' : ''?>">最近7天</a> <a onclick="selData('<?php echo $this->projectUrl(array('action'=>'visitlength')) ;?>',3,<?php echo $this->vars['doType'];?>);" class="<?php echo $this->vars['dateType']==3 ? 'currentTimeRange' : ''?>">最近30天</a> <a onclick="selData('<?php echo $this->projectUrl(array('action'=>'visitlength')) ;?>',4,<?php echo $this->vars['doType'];?>);" class="<?php echo $this->vars['dateType']==4 ? 'currentTimeRange' : ''?>">最近三个月</a> <a onclick="selData('<?php echo $this->projectUrl(array('action'=>'visitlength')) ;?>',5,<?php echo $this->vars['doType'];?>);" class="<?php echo $this->vars['dateType']==5 ? 'currentTimeRange' : ''?>">全部</a>&nbsp;&nbsp;&nbsp;&nbsp;
										<span>日期选择</span>：<input name="startTime" type="text" class="input" id="startTime" size="18" value="<?php echo $this->vars['startTime'];?>" /><script type="text/javascript">Calendar.setup({"ifFormat":"%Y-%m-%d","firstDay":0,"showsTime":true,"showOthers":false,"timeFormat":24,"inputField":"startTime","button":"startTime"});</script>
						-
						<input name="endTime" type="text" class="input" id="endTime" size="18" value="<?php echo $this->vars['endTime'];?>" />
						<script type="text/javascript">Calendar.setup({"ifFormat":"%Y-%m-%d","firstDay":0,"showsTime":true,"showOthers":false,"timeFormat":24,"inputField":"endTime","button":"endTime"});</script>
									</div>
									<!-- 时间选择条 -->	
								</td>
								<td rowspan="3">
									<input type="hidden" name="dateType" id="dateType" value="<?php echo $this->vars['dateType'];?>" />
									<input type="hidden" name="doType" id="doType" value="<?php echo $this->vars['doType'];?>" />	
									<input name="search" type="button" id="search" value="" class="s-button" onclick="selData('<?php echo $this->projectUrl(array('action'=>'visitlength')) ;?>',6,<?php echo $this->vars['doType'];?>);"/>								
								</td>
							  </tr>
							  <tr>
								<td colspan="5">地区选择：
									<select name="areas" id="areas" >
									  <option value="">全部</option>
									</select></td>
								</tr>
							  <tr>
								  <td>操作系统：
										<select name="osName" id="osName" size="1">
											<option value="">全部</option>
											<?php foreach($this->osNameRows as $key=>$row) {?>
											<option value="<?php echo $row[0];?>" <?php if($this->vars['osName']==$row[0]){?>selected="selected"<?php }?>><?php echo $row[1];?></option>
											<?php }?>
										</select></td>		
									<td >渠道：</td>
									<td ><div style="position: relative; width:130px;">
										<select  name="select" id="select" class="select-write" onchange="source.value=select.value;source.select()">
											<option value="">==选择==</option>   
											<?php foreach($this->memberRows as $key=>$row) {
												if (trim($row['name'])!=''){
											?>
											  <option value="<?php echo $row['name'];?>" <?php if($this->vars['source']==$row['name']){?>selected="selected"<?php }?>><?php echo $row['name'];?></option>   
											<?php }
												}
											?>
										  </select>   
  							 			 <input type="text" class="text-write" name="source" id="source" value="<?php echo $this->vars['source'];?>"/>
										</div>
									</td>
									<td >SourceId ：</td>
									<td><div style="position: relative; width:130px;" class="sourceId-con">
										<select name="select_sourceId" id="select_sourceId" class="select-write" onchange="sourceId.value=select_sourceId.value;sourceId.select()">
											<option value="">==选择==</option> 
										</select>
										<input type="text" class="text-write" name="sourceId" id="sourceId" value="<?php echo $this->vars['sourceId'];?>"/>
										<input type="hidden" name="default_sourceId" id="default_sourceId" value="<?php echo $this->vars['sourceId'];?>" />
										</div>
										<div class="sourceId-con-loading" style="width:130px;display:none;">加载中...</div>
									</td>
								  </tr>
								</table>
						</div>
									
						
						
					</div>	
				</div>
				<div class="bi-s-bottom"></div>			
			</div>
			</form>
			<div class="clear" style="height:20px;"></div>
			<div class="bi-data">
				<div class="bi-d-top">
					<div class="d-t-left">访问时长</div>
					<div class="d-t-right"><span <?php if(count($this->rows)>0){?>class="show"<?php } else {?>class="hide"<?php }?> id="data_01" onclick="showData('01')" style="cursor:pointer;"></span></div>
				</div>
				<div class="bi-d-center  clear" id="data01">
					<div class="bi-d-center-bg">
					<!--content start-->
					<?php if(count($this->rows)>0){?>
					<span class="d-line"></span>
					<div id="content" >
					<div class="data-title">
						<a class="data-row  pie" onclick="showReportData('data-1','pie');"><span></span></a>
						<a class="data-row  column " onclick="showReportData('data-2','column');"><span class="on"></span></a>
					</div>
					
					<div id="data-1" class="bi-data-report" style="display:none">
						<?php 
						$pieStr = '';
						$num = count($this->rows);
						if($num>0){
							$numFlag = intval($num/2);
							$avgVisitLengthCount = 0;
							foreach($this->rows as $key=>$row) {
								$avgVisitLength = $row['uv']>0 ? intval($row['visitLength']/$row['uv']) : 0;
								$avgVisitLengthCount = $avgVisitLengthCount + $avgVisitLength;
							}
							$pieArray = array();	
							$i = 0;
							foreach($this->rows as $key=>$row) {
								$i++;
								$avgVisitLength = $row['uv']>0 ? intval($row['visitLength']/$row['uv']) : 0;
								$avgVisitLengthPercent = $avgVisitLengthCount>0  ? number_format($avgVisitLength/$avgVisitLengthCount,4)*100 : 0 ;
								$avgVisitLengthPercent = $avgVisitLengthPercent>100 ? 100 : $avgVisitLengthPercent ;
								if($i==$numFlag){
									$pieArray[] = "
									{
										name: '{$row['pageName']}',    
										y: {$avgVisitLengthPercent},
										sliced: true,
										selected: true
									}
									";
								}else{
									$pieArray[] = "['{$row['pageName']}',{$avgVisitLengthPercent}]";
								}
							}
							$pieStr = count($pieArray) > 0 ? implode(',', $pieArray) : '';	
						}
						
						?>
					
						<script type="text/javascript" src="<?php echo $this->baseUrl;?>/files/admin/js/highcharts/js/highcharts.js"></script>
						<script type="text/javascript" src="<?php echo $this->baseUrl;?>/files/admin/js/highcharts/js/modules/exporting.js"></script>
						<script type="text/javascript">
							var chart;
							$(document).ready(function() {
								chart = new Highcharts.Chart({
									chart: {
										renderTo: 'container1',
										plotBackgroundColor: null,
										plotBorderWidth: null,
										plotShadow: false
									},
									title: {
										text: '页面平均访问时长'
									},
									tooltip: {
										formatter: function() {
											return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
										}
									},
									plotOptions: {
										pie: {
											allowPointSelect: true,
											cursor: 'pointer',
											dataLabels: {
												enabled: true,
												color: '#000000',
												connectorColor: '#000000',
												formatter: function() {
													return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
												}
											}
										}
									},
									series: [{
										type: 'pie',
										name: 'Browser share',
										data: [
											<?php echo $pieStr;?>
										]
									}]
								});
							});
								
						</script>
						<div id="container1" style="width: 710px; height: 300px; position:relative;overflow:hidden;"></div>
						</div>
						
						<div id="data-2" class="bi-data-report" >
						<script type="text/javascript">
							Highcharts.visualize = function(table, options) {
								// the categories
								options.xAxis.categories = [];
								$('tbody th', table).each( function(i) {
									options.xAxis.categories.push(this.innerHTML);
								});
								
								// the data series
								options.series = [];
								$('tr', table).each( function(i) {
									var tr = this;
									$('th, td', tr).each( function(j) {
										if (j > 0) { // skip first column
											if (i == 0) { // get the name and init the series
												options.series[j - 1] = { 
													name: this.innerHTML,
													data: []
												};
											} else { // add values
												options.series[j - 1].data.push(parseFloat(this.innerHTML));
											}
										}
									});
								});
								
								var chart = new Highcharts.Chart(options);
							}
								
							// On document ready, call visualize on the datatable.
							$(document).ready(function() {			
								var table = document.getElementById('datatable'),
								options = {
									   chart: {
										  renderTo: 'container2',
										  defaultSeriesType: 'column'
									   },
									   title: {
										  text: '页面平均访问时长'
									   },
									   xAxis: {
										   labels: {
												rotation: 0,
												align: 'center',
												style: {
													 font: 'normal 12px Verdana, sans-serif',
													 padding:'10px 0 0 0'
												}
											}
									   },
									   yAxis: {
										  title: {
											 text: '平均访问时长(秒)'
										  }
									   },
									   tooltip: {
										  formatter: function() {
											 return '<b>'+ this.x.toLowerCase() +'</b><br/>'+this.series.name+'：'+
												this.y +'(秒)' ;
										  }
									   }
									};
								
													
								Highcharts.visualize(table, options);
							});
								
						</script>
						<div id="container2" style="width: 710px; height: 300px; position:relative;overflow:hidden;"></div>						
						<table id="datatable" style="display:none;">
							<thead>
								<tr>
									<th></th>
									<th>平均访问时长</th>
								</tr>
							</thead>
							<tbody>
							<?php 
							foreach($this->rows as $key=>$row) {
								$avgVisitLength = $row['uv']>0 ? intval($row['visitLength']/$row['uv']) : 0;
							?>
								<tr>
									<th><?php echo $row['pageName'];?></th>
									<td><?php echo $avgVisitLength;?></td>
								</tr>
							<?php
							}
							?>						
							</tbody>
						</table>
						</div>
						
					</div>
					<span class="d-line"></span>
					<?php }?>
					<!--content end-->
					</div>
				</div>
				<div class="bi-d-bottom"></div>
			</div>
			
			
			<div class="clear" style="height:20px;"></div>
			<div class="bi-data">
				<div class="bi-d-top">
					<div class="d-t-left">数据详情</div>
					<div class="d-t-right"><span <?php if(count($this->rows)>0){?>class="show"<?php } else {?>class="hide"<?php }?> id="data_02" onclick="showData('02')" style="cursor:pointer;"></span></div>
				</div>
				<div class="bi-d-center  clear" id="data02">
					<div class="bi-d-center-bg">
					<!--content start-->
					<?php if(count($this->rows)>0){?>
					<span class="d-line"></span>
					<table class="table">
						<tr class="subject">
							<td>路径</td>
							<td>平均访问时长(秒)</td>
							<td>占比</td>
							<td>参照</td>
						</tr>
						<?php 
						foreach($this->rows as $key=>$row) {
							$avgVisitLength = $row['uv']>0 ? intval($row['visitLength']/$row['uv']) : 0;
							$avgVisitLengthPercent = $avgVisitLengthCount>0  ? number_format($avgVisitLength/$avgVisitLengthCount,4)*100 : 0 ;
							$avgVisitLengthPercent = $avgVisitLengthPercent>100 ? 100 : $avgVisitLengthPercent ;
						?>
							<tr class="dataLine">
								<td><?php echo $row['pageName'];?></td>
								<td><?php echo $avgVisitLength;?></td>
								<td><?php echo $avgVisitLengthPercent;?>%</td>
								<td><?php echo timeToString($avgVisitLength);?></td>
							</tr>
						<?php
						}
						?>
				  	</table>
					<?php }?>
					<!--content end-->
					</div>
				</div>
				<div class="bi-d-bottom"></div>
			</div>
			
			
			
		</div>
	
</div>
<script language="javascript">
//默认操作
$(function(){
	$("#data_02").attr('class', 'hide');
	$("#data02").hide();
	
	//暂未开放
	//$("#source").attr('disabled','disabled');
})

function selData(action,dateType,doType){
    $('#searchForm').attr('action', action);
	$('#dateType').attr('value', dateType);
	$('#doType').attr('value', doType);
    $('#searchForm').submit();
}


<!-- 更新渠道时，更新sourceId start-->
$(function(){
	$("#select").change(function(){
	if($.trim($("#source").val())!=''){
		$(".sourceId-con").hide();
		$(".sourceId-con-loading").show();
		//$("#sourceId").attr('value','');
		var self=$("#select_sourceId")[0];
			 $.ajax({ url: "<?php echo $this->projectUrl(array('controller'=>'act-day-data-pagevisit','action'=>'sourceids'));?>",
				 type:"post",           
				 dataType:"json",
				 data: "source="+$("#source").val(),
				 success:function(data){ 
						self.options.length=0;
						self.options[0] = new Option('==选择==', '');
						var default_val=$("#default_sourceId").val();
						var flag =0;
						$.each(data,function(i){
							self.options[i+1] = new Option(data[i], data[i]);
							if(default_val==data[i]) {										 
								self.options[i+1].selected=true;
								$("#sourceId").attr('value',default_val);	
								flag =1;																				
							} 
						}); 
						if(flag ==0){
							$("#sourceId").attr('value','');
						}
						$(".sourceId-con").show();
						$(".sourceId-con-loading").hide();	
				 } 
			 });
		}	
	})
	if($.trim($("#source").val())!=''){
		$("#select").change();
	}
})
<!-- 更新渠道时，更新sourceId  end-->

function showReportData(flag,doElement){
	$(".bi-data-report").hide();
	$("#"+flag).show();
	//del Default
	$('.data-title .data-row span').removeClass('on');
	$("."+doElement+" span").addClass('on');
}
</script>
</body>
</html>